<!-- 排考(操作页面) -->
<template>
    <div>
        <div style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/arrangingExaminations' }">
                    <span @click="reback">{{ $t('arrangingExaminations.examinationSchedulingOperation') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('arrangingExaminations.arranging') }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card v-loading="loading" shadow="never" body-style="padding: 10px;">
            <div style="padding:15px 15px 0 15px; display:flex;" class="row-bg" justify="space-between">
                <h2 class="condition-title" style="float:left">
                    {{ $t('arrangingExaminations.englishReading') }} - {{ $t('arrangingExaminations.arranging') }}（{{ $t('arrangingExaminations.currentExam') }}<span>{{ numbera }}</span>{{ $t('arrangingExaminations.people') }}，{{ $t('arrangingExaminations.arrangAlready') }}<span>{{ numberb }}</span>{{ $t('arrangingExaminations.people') }}。）
                </h2>
                <el-button style="float:right; margin-left:10px;" @click="reback">{{ $t('arrangingExaminations.goBack') }}</el-button>
            </div>
            <hr>
            <el-form ref="queryForm" label-suffix="：" label-width="120px" label-position="right">
                <el-row :gutter="24">
                    <!-- 校区 -->
                    <el-col :span="8">
                        <el-form-item :label="$t('arrangingExaminations.campus')" prop="campus">
                            <el-select v-model="queryForm.condition.campus" clearable filterable  style="width:100%">
                                <el-option
                                    v-for="item in options.campus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>                        
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="float:right">
                        <el-button style="float:right; margin-left:10px;" @click="printSignInForm">{{ $t('arrangingExaminations.printSignInForm') }}</el-button>
                        <el-button style="float:right; margin-left:10px;" @click="candidateInformationForm">{{ $t('arrangingExaminations.candidateInformationForm') }}</el-button>
                        <el-button style="float:right; margin-left:10px;" @click="printTheAdmissionCard">{{ $t('arrangingExaminations.printTheAdmissionCard') }}</el-button>
                        <!-- <el-button style="float:right; margin-left:10px;" type="primary" @click="arranging">{{ $t('arrangingExaminations.arranging') }}</el-button> -->
                        <el-dropdown style="float:right;" placement='bottom-start' trigger="click" @command="downloadFile">
                            <el-button type="primary">{{$t('arrangingExaminations.arranging')}}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="依次排考">{{ $t('arrangingExaminations.arrangeSuccessively') }}</el-dropdown-item>
                                <el-dropdown-item command="随机排考">{{ $t('arrangingExaminations.arrangeRandom') }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-form>
            <edu-table :pagination="false" :selection='true' :order="true" :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini">
                <edu-table-column :label="$t('arrangingExaminations.examinationName')" prop="examinationName"></edu-table-column> <!-- 考场名称 -->
                <edu-table-column :label="$t('arrangingExaminations.examinationPlaces')" prop="examinationPlaces"></edu-table-column> <!-- 考场地点 -->
                <edu-table-column :label="$t('arrangingExaminations.campus')" prop="campus"></edu-table-column> <!-- 校区 -->
                <edu-table-column :label="$t('arrangingExaminations.examSchedulingCapacity')" prop="examSchedulingCapacity"></edu-table-column> <!-- 排考容量 -->
                <!-- 操作 -->
                <edu-table-column :label="$t('arrangingExaminations.operation')" min-width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="check(scope.row)">{{ $t('arrangingExaminations.check') }}</el-button>
                    </template>
                </edu-table-column>
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog :title="$t('arrangingExaminations.arrangingSuccess')" :before-close="cancel" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <h2>
                {{ $t('arrangingExaminations.sipingRoadCampus') }}：{{ $t('arrangingExaminations.currentRoomAccommodate') }}<span style="color: red;font-size: 20px;">{{ numbered }}</span>{{ $t('arrangingExaminations.people') }}，{{ $t('arrangingExaminations.actualNumber') }}<span style="color: red;font-size: 20px;">{{ numbered }}</span>{{ $t('arrangingExaminations.people') }}
            </h2>
            <h2>
                {{ $t('arrangingExaminations.jiadingCampus') }}：{{ $t('arrangingExaminations.currentRoomAccommodate') }}<span style="color: red;font-size: 20px;">{{ numbered }}</span>{{ $t('arrangingExaminations.people') }}，{{ $t('arrangingExaminations.actualNumber') }}<span style="color: red;font-size: 20px;">{{ numbered }}</span>{{ $t('arrangingExaminations.people') }}
            </h2>
            <div style="text-align: center; padding:inherit">
                <el-button class="distance" type="text" @click="printTheAdmissionCard">{{ $t('arrangingExaminations.printTheAdmissionCard') }}</el-button>
                <el-button class="distance" type="text" @click="candidateInformationForm">{{ $t('arrangingExaminations.candidateInformationForm') }}</el-button>
                <el-button class="distance" type="text" @click="printSignInForm">{{ $t('arrangingExaminations.printSignInForm') }}</el-button>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">{{ $t('examinationSetting.cancel') }}</el-button>
                <el-button type="primary" @click="determine">{{ $t('examinationSetting.determine') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
export default {
    props: {
        compile: {
            type: String,
            default: ''
        },
        dataObjList: {
            type: Array,
            default: () => []   
        }
    },
    data() {
        return {
            numbera: 10002,
            numberb: 12121,
            numbered: 222200,
            queryForm: {
                pageNum_: 1,
                pageSize_: 10,
                total_: 0,
                condition: {
                    campus: '' // 校区
                }
            },
            options: {
                campus: [] // 校区
            },
            dataList: [
                {
                    examinationName: '考场名称-示例',
                    examinationPlaces: '考场地点-北1区',
                    campus: '四平路校区',
                    examSchedulingCapacity: 60
                }
            ],
            dialogFormVisible: false
        }
    },
    created() {
        
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        // 返回主页面
        reback() {
            this.$emit('change-exam')
        },
        // 打印签到表
        printSignInForm() {

        },
        // 考生信息表
        candidateInformationForm() {

        },
        // 打印准考证
        printTheAdmissionCard() {

        },
        // 排考
        arranging() {
            this.dialogFormVisible = true
        },
        // 查看
        check() {

        },
        // 弹框内的取消
        cancel() {
            this.dialogFormVisible = false
        },
        // 弹框内的确定
        determine() {
            this.dialogFormVisible = false
        },
        // 筛选条件字典查询
        getOptions() {
            let data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_XQ"]
            };
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        campus : "X_XQ" // 校区
                    },
                    res.data,
                    this.options
                )
            })
        },
        downloadFile(command) {
            if (command === '依次排考') {
                this.reback()
            } else if (command === '随机排考') {
                this.arranging()
            }
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .distance {
    padding: 0 15px;
}
</style>